<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <!-- <div slot="header" class="clearfix">
        <span>报价信息</span>
      </div>-->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="item of tabs" :key="item.name" :label="item.name" :name="item.id"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableData" max-height="300" border style="width: 100%">
        <el-table-column prop="order_no" label="订单号" width="180"></el-table-column>
        <el-table-column prop="quantity" label="数量（度）"></el-table-column>
        <el-table-column prop="show_price" label="价格（元）">
          <template slot-scope="scope">
            <span>{{$coinToYuan(scope.row.price)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.status === 'done' ? '已完成' : scope.row.status === 'need_verify' ? '待确认' : '已取消'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="show_time" label="交易时间"></el-table-column>
        <el-table-column prop="txid" label="区块链交易ID"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleCancle(scope.row)">取消</el-button>
            <el-button type="text" size="small" @click="handlePurchase(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" justify="end">
      <Page
        @handleSizeChange="handleSizeChange"
        @handlePageChanged="handlePageChanged"
        :page.sync="pageNo"
        :pageView.sync="pageSize"
        :totalElements.sync="total"
      />
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import Purchase from "./purchase.vue";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page,
    Purchase
  }
})
export default class MyApplication extends Vue {
  // for diog
  // protected dlgVib: boolean = false;
  // protected dlgTitle: string = "";
  // protected dlgCpt: any = null;
  // protected width: any = "";
  protected activeName: any = null;
  // TODO
  protected tabs: any = [
    { name: "全部", id: null },
    { name: "购电", id: "buy" },
    { name: "售电", id: "sale" }
  ];
  protected tableData: any = [];
  protected total: number = 0;
  protected pageNo: number = 1;
  protected pageSize: number = 10;

  protected linkTo(row: any) {
    this.$router.push({ path: "/blockDetail", query: row });
  }
  protected handlePageChanged(val: number) {
    this.pageNo = val;
    this.init();
  }
  protected handleSizeChange(val: number) {
    this.pageSize = val;
    this.pageNo = 1;
    this.init();
  }
  protected handleClick(val: any) {
    this.init();
  }

  protected created() {
    this.init();
  }
  protected async init() {
    const params: any = {
      page_no: this.pageNo,
      page_size: 10,
    };
    if (this.activeName !== '0') {
      params.type = this.activeName
    }

    await this.$api.getOrdersQuery(params).then((response: any) => {
      const {
        data: {
          Orders,
          paginator: { page_no, page_size, total_count }
        }
      } = response;
      Orders.forEach((el: any) => {
        const time = "show_time";
        const price = "show_price";
        el[time] = Vue.prototype.$fmtDate(el.created_at);
        el[price] = Vue.prototype.$coinToYuan(el.price);
      });
      this.total = total_count;
      this.pageNo = page_no;
      this.tableData = Orders;
    });
  }
  protected handlePurchase(row: any) {
    this.$router.push({ path: "/orderDetail", query: row });
  }
  protected async handleCancle(row: any) {
    const params: any = {
      order_no: row.order_no,
    };

    await this.$confirm("确认取消", "取消提醒", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    this.$api
      .cancelOrder(params)
      .then(() => {
        this.$message.success("已取消");
        this.init();
      })
      .catch(() => {
        this.$message({
          message: "取消失败",
          type: "info",
        });
      });
  }
}
</script>

<style lang="scss" scoped>
</style>


